<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            width: 600px;
            margin: 10px auto;
        }
        .tb{
            border-collapse: collapse;
            width: 100%;
        }
        .tb th{
            background-color: #0094ff;
            color: white;
        }
        .tb td,
        .tb th{
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }
        .add{
            border: 2px solid ;
        }
        button{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="add">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            价格:<input type="text" v-model="price" @keydown.enter="add">
            <input type="button" value="添加" @click="add">
        </div>
        <div>
            <table class="tb">
                <tr>
                    <th>
                        全选<input type="checkbox" @change="allCheckChange" v-model="allCheck">
                    </th>
                    <th>产品图片</th>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>数量</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
                <!-- 动态生成数据 -->
                <div>
                    <tr v-for="(item,index) in products" :key="index.id">
                        <td>
                            <input type="checkbox" v-model="checks" :value="item">
                        </td>
                        <td>
                            <img height="80" width="50" :src="item.imgSrc" alt="">
                        </td>
                        <td>
                            {{item.code}}
                        </td>
                        <td>
                            {{item.productName}}
                        </td>
                        <td>
                            <button @click="decrease(item)" :disabled="item.count===1">-</button>
                            {{item.count}}
                            <button @click="increase(item)">+</button>
                        </td>
                        <td>
                            {{item.price}}
                        </td>
                        <td>
                            <button @click="del(index)">删除</button>
                        </td>
                    </tr>
                </div>
            </table>
            <div class="add" style="text-align:center;" v-show="!products.length">没有更多数据了</div>
            <h2 class="add" style="text-align:right">总价:{{total}}</h2>
        </div>
    </div>
</body>
</html> 
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>
    //封装localstoreage方法
        let local ={
            get(key){
                return JSON.parse(localStorage.getItem(key))
            },
            set(key,value){
                localStorage.setItem(key,JSON.stringify(value))
            }
        }
        //初始数据
        let initialData = ([
                {
                    imgSrc:'https://ts1.cn.mm.bing.net/th/id/R-C.8e152ab8bdb0964ea87076d1f5b23de5?rik=ZKfG%2fcvqoDByXw&riu=http%3a%2f%2fimage11.m1905.cn%2fuploadfile%2f2013%2f0327%2f20130327104108527.jpg&ehk=XgCZZMlNMAdLcxiiuTjBcoSFwl1kracczfYbqVZh7%2fg%3d&risl=&pid=ImgRaw&r=0',
                    code:'1122',
                    productName:'钢铁侠',
                    count:10,
                    price:300
                },
                {
                    imgSrc:'https://tse3-mm.cn.bing.net/th/id/OIP-C.1WZIg_GharHaePEyBEH8CAHaNK?pid=ImgDet&rs=1',
                    code:'1123',
                    productName:'蜘蛛侠',
                    count:10,
                    price:100
                },
                {
                    imgSrc:'https://pic4.zhimg.com/v2-67d7516d9081145b69b36301ea3baff3_r.jpg',
                    code:'1124',
                    productName:'绯红女巫',
                    count:1,
                    price:200
                },
            ] )

     let vm = new Vue({
        el:'#app',
        data:{
            allCheck:false,//全选的值
            checks:[],//选中的商品
            code:'',
            productName:'',
            imgSrc:'',
            price:'',
            products:local.get('qf-data') ?? initialData
        },
        methods:{
            del(index){
                console.log(index)
                //储存被删除的数据
                let target = this.products.splice(index,1)
                local.set('qf-data',this.products)
                //过滤checks数组中id和传入id相同的选项
                this.checks = this.checks.filter(item=>item.id!==target[0].id)
            },
            add(){
                //非空校验
                if(!this.code || !this.productName || !this.imgSrc || !this.price){
                    return
                }
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    imgSrc:this.imgSrc,
                    code:this.code,
                    productName:this.productName,
                    count:1,
                    price:this.price
                }
                this.products.push(obj)
                //将数据存到本地
                local.set('qf-data',this.products)
            },
            allCheckChange(){
                if(this.allCheck){
                    this.checks = this.products
                }else{
                    this.checks = []
                }
            },
            increase(current){
                current.count++
            },
            decrease(current){
                current.count--
            }
        },
        watch:{
            checks(newChecks){
                if(newChecks.length===this.products.length){
                    this.allCheck = true
                }else{
                    this.allCheck =false
                }
            }
        },
        computed: {
            total(){
                let res = this.checks.reduce((total,item) => {
                    return total += item.price*item.count
                },0)
                return res.toFixed(2)
            }
        }
     })

</script>